<template>
  <div class="good-tab-bar">
    <div class="items">
      <el-tabs v-model="activeName">
        <el-tab-pane v-for="(tab, ix) in datas.list" :key="ix" :label="tab.title" :name="ix + 1">
          <el-row :gutter="10">
            <el-col :span="tab.column === 1 ? 24 : tab.column === 2 ? 12 : 8" v-for="(item, index) in tab.list" :key="index">
              <div v-if="tab.column === 1" class="column1">
                <img class="img" :src="item.image" />
                <div class="tbx">
                  <el-text class="w100" line-clamp="2">{{ item.name }}</el-text>
                  <el-text class="price w100">￥{{ item.price }}</el-text>
                </div>
              </div>
              <div v-else class="column2">
                <img class="img" :class="tab.column === 2 ? 'height157' : 'height115'" :src="item.image" />
                <div class="tbx">
                  <el-text class="w100" line-clamp="2">{{ item.name }}</el-text>
                  <el-text class="price w100">￥{{ item.price }}</el-text>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script lang="ts" setup name="GoodTabBar">
import { toRefs, ref } from "vue";
const props = defineProps({
  datas: {
    type: Object
  }
});
const { datas } = toRefs(props);
const activeName = ref(1);
</script>
<style lang="scss" scoped>
.good-tab-bar {
  background-color: #ffffff;
  .top {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  .items {
    padding: 0 10px;
    .column1 {
      display: flex;
      margin-bottom: 10px;
      .img {
        display: block;
        width: 98px;
        height: 98px;
      }
      .tbx {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        .price {
          color: #ff0000;
        }
      }
    }
    .column2 {
      margin-bottom: 10px;
      .img {
        display: block;
        width: 100%;
      }
      .tbx {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        .price {
          margin-top: 10px;
          color: #ff0000;
        }
      }
    }
  }
}
</style>
